<template>
  <div class="h100 w100">
    <div class="item-title">{{ casesItemTag[0].NAME }}</div>
    <div class="a-df">
      <div 
        v-for="(item, index) in casesItemTag[0].uflist" :key="index"
        class="cases-tag" 
        :class="{ isshowTag: item.isshow }" 
        @click="showcasesTag(index)"
        >
        {{ item.CS_WJMC }}
      </div>
    </div>
    <div class="item-detail">
      <!-- <img src="~@/assets/reception/cases/test.png" alt=""> -->
      <img :src=" upload + casesimg" alt="">
    </div>
  </div>
</template>

<script>
import { getAppGetXMALByIDApi } from '@/api/resService'

export default {
  props: {
    casesItemID: {
      type: String,
      default: false,
    },
  },
  data() {
    return {
      casesItemTag:[{
        uflist:[{}]
      }],
      casesimg:'',
      upload:process.env.VUE_APP_API_BASE_URL,
    }
  },
  methods: {
    showcasesTag(index){
      for (const item of this.casesItemTag[0].uflist) {
        item.isshow = false
      }
      this.casesimg =  this.casesItemTag[0].uflist[index].WJLJ
      this.casesItemTag[0].uflist[index].isshow = true
    },
    getAppGetXMALByID(){
      this.casesItemTag = [{
        uflist:[{}]
      }],
      getAppGetXMALByIDApi(
        {
          ID:this.casesItemID
        }
      ).then((res) => {
        this.casesItemTag[0].NAME = res.data[0].NAME
        for (const item of res.data[0].uflist) {
          console.log('item.WJLJ',item.WJLJ);
          if (item.WJLJ) {
            this.casesItemTag[0].uflist.push(item)
          }
        }
        this.casesItemTag[0].uflist.shift();
        // this.casesItemTag[0].uflist = this.casesItemTag[0].uflist.slice(-1)
        // this.casesItemTag = res.data
        this.$set(this.casesItemTag, 'isshow', false);
        this.casesItemTag[0].uflist[0].isshow = true
        this.casesimg =  this.casesItemTag[0].uflist[0].WJLJ
      })
      .catch((err) => {
      })
      .finally(() => {
      })
    },
  },
  watch: {
    casesItemID: function () {
      this.getAppGetXMALByID()
    }
  },
}
</script>

<style lang="less" scoped>
.item-title {
  // width: 100%;
  margin: 20px auto;
  font-size: 24px;
  color: #000;
  // text-align: center;
}
.cases-tag {
  flex: 1;
  font-size: 20px;
  border: solid 1px #efefef;
  margin: 0 20px;
}
.isshowTag{
  background: #486dee;
  color: #fff;
}
.item-detail{
  margin-top:20px;
  img{
    width: 100%;
  }
}
</style>
